<template>
	<view style="margin-bottom: 300upx;">
		<view class="cu-bar search bg-white my-search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="lawyerName" type="text" placeholder="搜索律师" confirm-type="search"></input>
			</view>
			<view class="action">
				<button @click="handSearchLawyer" class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view>
		<view class="line-row">

		</view>
		<view class="search-list">
			<!-- <button class="cu-btn round line-orange">查看同城</button> -->
			<view class="search-item">
				<text class="site" @click="handSiteName">{{lawyerAddress==''?'地区':lawyerAddress}}</text>
				<view class=" cuIcon-triangledownfill" style="font-size: 36upx;">
				</view>
				<text @click="handServe" class="site" style=" margin-left: 20upx;">智能排序</text>
				<view class=" cuIcon-triangledownfill" style="font-size: 36upx;">
				</view>
			</view>
		</view>
		<view class="line-row">

		</view>
		<view class="cu-list menu-avatar">
			<view @click="handNavDetails(item.id)" class="cu-item" style="height: 200upx;" v-for="(item,index) in dataList" :key='item.id'>
				<view class="cu-avatar round xl " :style="{backgroundImage:'url('+ item.handUrl +')'}">
					<view v-if="index<3" class="cu-tag badge bg-yellow cuIcon-upstagefill"></view>
				</view>
				<view class="content" style="left: 180upx;">
					<view class="text-grey">

						<view class="text-cut">{{item.lawyerName}}</view>
						<view class="cu-tag round bg-orange sm">执业{{item.practiceYear}}年</view>
						<view class="cu-tag round bg-orange sm">认证</view>

					</view>
					<view class="text-grey">

						<view class="text-cut"><text class="cuIcon-locationfill text-orange margin-right-xs"></text> {{item.lawyerAddress}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<view class="cu-tag line-blue round" v-for="ele in item.goodAt">
								{{ele}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<modal ref='myModal' @subModal='subModal'>
			<view class="modal-list">
				<view class="topic-list">
					<view class="item-box" v-for="item in caseArr" :key='item.id'>

						<view class="item" @click="handSele(item)">
							<view class="title">
								#{{item.dataValue}}#
							</view>
							<image v-if="item.isFlg==false" class="icon" src="../../static/img-topic-no.png" mode=""></image>
							<image v-if="item.isFlg==true" class="icon" src="../../static/img-topic.png" mode=""></image>
						</view>
						<view class="line-row" style="margin: 30upx 0;">

						</view>
					</view>

				</view>
			</view>
		</modal>
		<lbPicker ref="pickerSite" mode="multiSelector" :list="siteArr" :level="3" @confirm="handSite"><text slot="action-center">请选择</text></lbPicker>
	</view>
</template>

<script>
	import lbPicker from '../components/lbPicker'
	import modal from '../components/modal/modal'
	import siteArr from '../components/lbPicker/area-data-min.js'
	export default {
		components: {
			lbPicker,
			modal
		},
		data() {
			return {
				siteArr: siteArr,
				// findYuLawyerByPage
				page: 1,
				per_page: 10,
				dataList: [],
				caseArr: [],
				siteName: '',
				lawyerName: '',
				lawyerAddress: ''
			};
		},
		async mounted() {
			this.getMore()
			let res = await this.http.getFieldList()
			res.forEach(item => {
				item.isFlg = false
			})
			this.caseArr = res
		},
		methods: {
			handSearchLawyer() {
				this.getMore()
			},
			handSele(item) {
				item.isFlg = !item.isFlg
			},
			handServe() {
				this.$refs.myModal.modalName = 'bottomModal'
				// this.$refs.picker.show()
			},
			handSiteName() {
				this.$refs.pickerSite.show()
			},
			handSite(item) {
				console.log(item)
				this.lawyerAddress = []
				item.item.forEach(ele => {
					this.lawyerAddress.push(ele.label)
				})
				this.lawyerAddress = this.lawyerAddress.join('-')
				this.getMore()
			},
			handNavDetails(id) {
				uni.navigateTo({
					url: '/pages/message/lawyerDetails/lawyerDetails?id=' + id
				})
			},
			async loadMore() {
				console.log('加载更多')
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				})
				let page = this.page
				let per_page = this.per_page
				let newObj = {
					page: page,
					limit: this.per_page,
					status: 1,
					lawyerName: this.lawyerName,
					lawyerAddress: this.lawyerAddress
				}
				let dataList = this.dataList
				page++;
				let dataListNextPage = await this.http.findYuLawyerByPage({
					page,
					limit: per_page,
					status: 1,
					lawyerName: this.lawyerName,
					lawyerAddress: this.lawyerAddress
				});
				uni.hideLoading()
				dataListNextPage.forEach(item => {
					item.goodAt = item.goodAt.split(',')
				})
				this.dataList = [...dataList, ...dataListNextPage];
				if (dataListNextPage.length) {
					this.page = page;
				};
				if (!dataListNextPage.length) {
					this.print('没有更多了')
				}

			},
			async getMore() {
				this.page = 1
				let newObj = {
					page: this.page,
					limit: this.per_page,
					status: 1,
					lawyerName: this.lawyerName,
					lawyerAddress: this.lawyerAddress
				}
				let dataList = await this.http.findYuLawyerByPage(newObj);
				dataList.forEach(item => {
					item.goodAt = item.goodAt.split(',')
				})
				this.dataList = dataList
				console.log(this.dataList, 'this.dataList')
			},
		}
	}
</script>

<style lang="scss">
	.topic-list {
		padding: 0 30upx;
		box-sizing: border-box;
		margin-top: 36upx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				color: #333333;
				font-size: 28upx;
				font-weight: bold;
			}

			.icon {
				width: 41upx;
				height: 41upx;
			}
		}
	}

	.my-search {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
	}

	page {
		background-color: #fff;
	}

	.search-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		box-sizing: border-box;
		height: 80upx;
		// background: rgba(250, 245, 225, 1);

		.search-item {
			display: flex;
			align-items: center;
			color: #7D7E80;
			font-size: 24upx;
		}

		.search-locat {
			width: 200upx;
			height: 48upx;
			border-radius: 24upx;
			border: 2px solid rgba(247, 181, 0, 1);
			color: #F7B500;
			font-size: 24upx;
			text-align: center;
			line-height: 48upx;
		}
	}
</style>
